<template>
  <div ref="chart" :style="{ width: '100%', height: '189px' }"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'
const chart = ref()

const option = ref( 
  {
    title: { text: "总用户量" },
    tooltip: {},
    xAxis: {
      data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
    },
    yAxis: {},
    series: [
      {
        name: "用户量",
        type: "line",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  }
)

let myChart:any 

const initChart = () => {
  myChart.resize()
}

onMounted(() => {
  // mounted中初始化charts
  myChart = echarts.init(chart.value as unknown as HTMLElement)
  myChart.setOption(option.value)
  // resize事件
  window.addEventListener("resize", initChart)
})


onBeforeUnmount(() => {
  // 销毁resize事件
  window.removeEventListener('resize', initChart)
})
</script>
<style lang="scss" scoped>

</style>